<!--  -->
<template>
    <div class="window-title" >
        <!-- 软件logo预留位置 -->
        <div class="op sc hand back"  v-if="needBack" @click="back">
<!--             <svg-icon icon-class="electron-logo"></svg-icon>-->

            <i class="el-icon-arrow-left"></i>{{ $t('返回') }}
        </div>

        <!-- 菜单栏位置 -->
        <div style="margin-left: 20px"></div>
        <!-- 中间标题位置 -->
        <div style="-webkit-app-region: drag;" class="title">{{ $t(title) }}</div>
        <div class="controls-container" >
            <div class="windows-icon-bg" @click="Mini">
                <svg-icon icon-class="mini" class-name="icon-size"></svg-icon>
            </div>
            <div class="windows-icon-bg" @click="MixOrReduction">
                <svg-icon v-if="mix" icon-class="reduction" class-name="icon-size"></svg-icon>
                <svg-icon v-else icon-class="mix" class-name="icon-size"></svg-icon>
            </div>
            <div class="windows-icon-bg close-icon" @click="Close">
                <svg-icon icon-class="close" class-name="icon-size"></svg-icon>
            </div>
        </div>
    </div>
</template>

<script>
import {ipcRenderer} from "electron";

export default {
    props:{
        title:{
            type:String,
            default:""
        },
        needBack:{
            type:Boolean,
            default:false
        }
    },
    data: () => ({
        mix: false,
        IsUseSysTitle: false,
        isNotMac: process.platform !== "darwin",
        IsWeb: process.env.IS_WEB
    }),

    components: {},
    created() {
        ipcRenderer.invoke("IsUseSysTitle").then(res => {
            this.IsUseSysTitle = res;
        });
    },

    mounted() {
        ipcRenderer.on("w-max", (event, state) => {
            this.mix = state
        })
    },

    methods: {
        back(){
            console.log('back');
            this.$router.back()
        },
        Mini() {
            ipcRenderer.invoke("windows-mini");
        },
        MixOrReduction() {
            ipcRenderer.invoke("window-max").then(res => {
                this.mix = res.status
            })
        },
        Close() {
            ipcRenderer.invoke("window-close");
        }
    },
    destroyed() {
        ipcRenderer.removeAllListeners("w-max");
    }
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>

.back{
    color: #0080ff; padding: 0 10px;
    -webkit-app-region: no-drag;
}
.back:hover {
    background-color: rgba(182, 182, 182, 0.2);
    color: #333;
}


.window-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    -webkit-app-region: drag;
    position: fixed;
    top: 0;
    z-index: 99999;
    background: #FFFFFF;
    border-bottom: 1px solid #d4d4d4;

    .title {
        text-align: center;
    }

    .logo {
        margin-left: 20px;
    }

    .controls-container {
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        text-align: center;
        position: relative;
        z-index: 3000;
        -webkit-app-region: no-drag;
        height: 100%;
        width: 138px;
        margin-left: auto;

        .windows-icon-bg {
            display: inline-block;
            -webkit-app-region: no-drag;
            height: 100%;
            width: 33.34%;
            color: rgba(129, 129, 129, 0.6);

            .icon-size {
                width: 12px;
                height: 15px;
            }
        }

        .windows-icon-bg:hover {
            background-color: rgba(182, 182, 182, 0.2);
            color: #333;
        }

        .close-icon:hover {
            background-color: rgba(232, 17, 35, 0.9);
            color: #fff;
        }
    }
}
</style>
